window.onload = function(){
	var tabs = document.getElementById("tabbar").getElementsByTagName("li");
	var cont = document.getElementById("content").getElementsByTagName("div");
	var len = cont.length;
	var flag = true;
	
	var fade = function(elem, callback, type){
		type || (type = "in");
		var px, timer;
		
		if(type == "in")
		{
			px = 0;
			timer = setInterval(function(){
				px += 3;
				if(px <= 100)
				{
					elem.style.opacity ? (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");
				}
				else
				{
					clearInterval(timer);
					elem.style.opacity ? (elem.style.opacity = 1) : (elem.style["filter"] = "alpha(opacity=100)");
					callback && callback(elem);
				}
			},10);
		}
		else
		{
			px = 100;
			timer = setInterval(function(){
				px -= 3;
				if(px >= 0)
				{
					document.addEventListener ? (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");
				}
				else
				{
					clearInterval(timer);
					elem.style.opacity ? (elem.style.opacity = 0) : (elem.style["filter"] = "alpha(opacity=0)");
					callback && callback(elem);
				}
			},10);
		}
	}
	
	for(var i = 0; i < len; i++)
	{
		cont[i].style.zIndex = len - i;
		tabs[i].index = cont[i].index = i;
		tabs[i].onclick = function(){
			if(flag)
			{
				flag = false;
				cont[this.index].style.display = "block";
				fade(cont[this.index]);
				for(var i = 0; i < len; i++)
				{
					tabs[i].className = "def";
					if(tabs[i].index != this.index)
					{
						fade
						(
							cont[i],
							function(elem)
							{
								elem.style.display = "none";
								elem.className = "cont t" + (elem.index + 1);
								flag = true;
							},
							"out"
						);
					}
				}
				this.className = "t" + (this.index + 1);
			}
		}
	}
};




